<template>
	<Modal v-model="modal" @on-ok="ok('form')" :loading="loading">
		<IForm :model="form" ref="form" :label-width="100" :rules="formRule" title="更新配置" >
			<IInput v-model="form.id" class="hide" />
	        <FormItem prop="key" label="配置名">
	            <IInput v-model="form.key" size="large" placeholder="配置名、唯一" clearable />
	        </FormItem>
	        <FormItem prop="vue" label="配置值">
	            <IInput v-model="form.vue" size="large" placeholder="配置值" clearable />
	        </FormItem>
	        <FormItem prop="switch" label="开关">
	            <ISwitch v-model="form.switch" :true-value="1" false-value="0" >
			        <span slot="open">开</span>
			        <span slot="close">关</span>
			    </ISwitch>
	        </FormItem>
	        <FormItem prop="status" label="状态">
	            <IInput v-model="form.status" size="large" placeholder="状态" clearable />
	        </FormItem>
	        <FormItem prop="type" label="类型">
	            <IInput v-model="form.type" size="large" placeholder="类型" clearable />
	        </FormItem>
	        <FormItem prop="desc" label="描述">
	            <IInput v-model="form.desc"  type="textarea" :autosize="{minRows: 5,maxRows: 10}" size="large" placeholder="描述" clearable />
	        </FormItem>
	    </IForm>
	</Modal>
</template>
<script>
import {Modal,Form,Input,Button,Switch} from 'iview';

export default {
	props :{
		callback:{type:Function}
	},
	components:{
        Modal,
        'IInput' : Input,
		'IForm' : Form,
		'FormItem' : Form.Item,
		'IButton' : Button,
		'ISwitch' : Switch,
    },
    data () {
        return {
            modal: false,
            loading : true,
            form :{
				id : 0,
				key : '',
				vue  : '',
				switch : false,
				status : '',
				type : '',
				desc : '',
            },
            formRule : {
                key: [
                    { required: true, message: '请填写配置名', trigger: 'blur' },
                ],
            },
        }
    },
    methods: {
        changeLoading(){
            this.loading = false;
            this.$nextTick(() => {
              this.loading = true;
            });
        },
    	ok(name){
    		this.$refs[name].validate(valid => {
    			if (!valid) {this.changeLoading();return false;}
    			this.Axios.Config.Config.Update(this.form)
	            .then(res =>{
	            	this.changeLoading();
	            	if(!res) return false;
	                this.modal = false;
	                this.callback();
	            })
    		})
    	}
    },
    watch:{
    	modal(newValue,oldValue){
    		if(!newValue){
    			this.form.id = 0;
    			this.form.switch = false;
    			this.$refs.form.resetFields();
    		}
    	}
    }
}
</script>